{{ $menu := site.Menus.footer }}
<footer class="bg-white dark:bg-dark dark:border-gray-700 border-t-2 border-gray-150" aria-labelledby="footer-heading">
  <h2 id="footer-heading" class="sr-only">
    {{ site.Title }} site footer
  </h2>
  <div class="max-w-7xl mx-auto py-10 px-6 lg:px-8 lg:py-16">
    <div class="pb-8 grid grid-cols-2 md:grid-cols-4 gap-10">
      {{ range $menu }}
      <div>
        <h3 class="dark:text-gray-400 text-gray-700 font-semibold tracking-wider uppercase">
          {{ if .URL }}
          <a href="{{ .URL }}" class="hover:text-secondary dark:hover:text-primary">
            {{ .Name }}
          </a>
          {{ else }}
          {{ .Name }}
          {{ end }}
        </h3>

        <ul class="mt-3 space-y-2 md:gap-y-3">
          {{ range .Children }}
          <li>
            <a href="{{ .URL }}" class="dark:text-gray-300 text-gray-500 hover:text-secondary dark:hover:text-primary">
              {{ .Name }}
            </a>
          </li>
          {{ end }}
        </ul>
      </div>
      {{ end }}
    </div>

    <div class="dark:border-gray-700 border-gray-300 mt-8 border-t pt-8 md:flex md:items-center md:justify-between">
      <div class="flex space-x-6 md:order-2 text-lg">
        {{ partial "social-buttons.html" (dict "color" false) }}
      </div>

      <p class="dark:text-gray-400 text-gray-400 mt-8 text-base md:mt-0 md:order-1">
        &copy; {{ now.Year }} {{ site.Copyright }} All rights reserved.
      </p>
    </div>
  </div>
</footer>
